import React, { useEffect, useLayoutEffect, useState } from 'react'
import useTime from '@/hooks/useTime'
import useIntervalJob from '@/hooks/useIntervalJob'

export default function SixTest() {
  function logName() {
    console.log('轮询')
  }
  const [count, setCount] = useState(0)
  const [flag, setFlag] = useState(true)
  function FirstNotRepeatingChar(str: string) {
    // write code here
    const obj = {}
    str.split('').forEach((item, index) => {
      obj[item] ? (obj[item].count += 1) : (obj[item] = { count: 1, index })
    })
    const result = Object.values(obj).find(item => item.count === 1)
    console.log(result)

    return result === undefined ? -1 : result.index
  }
  // FirstNotRepeatingChar('nnbb');
  //测试
  // useLayoutEffect(() => {//和componentDidMount等价
  //   console.log('useLayoutEffect1', count);
  //   return () => {
  //     console.log('useLayoutEffect1卸载', count);
  //   };
  // }, [flag]);

  // useLayoutEffect(() => {
  //   console.log('useLayoutEffect2', count);
  //   return () => {
  //     console.log('useLayoutEffect2卸载', count);
  //   };
  // }, [flag]);

  const [state, setState] = useState('hello world')
  useEffect(() => {
    // 1、 按下面的规律写一个方法。
    // 给定一个编码字符，按编码规则进行解码，输出字符串。编码规则是`count[letter]`，将 letter 的内容 count 次输出，count 是 0 或正整数，letter 是区分大小写的纯字母，支持嵌套形式。
    // 示例：
    const s1 = '10[a]2[bc]1[dgf]'
    console.log(decodeString(s1)) // 返回'aaaaaaaaaabcbc'
    const s2 = '2[3[a]2[bc]]'
    console.log(decodeString(s2)) // 返回 'aaabcbcaaabcbc'
    function decodeString(str: string) {
      const stack = []
      for (let i = 0; i < str.length; i++) {
        const cell = str[i]
        if (cell !== ']') {
          stack.push(cell) //进栈
        } else {
          let count = []
          let popCell: string | undefined = '' //循环个数
          const loopArr = []
          let loopStr = '' //结果
          while ((popCell = stack.pop()) !== '[') {
            loopArr.unshift(popCell)
          }
          // 循环输出count
          while (stack[stack.length - 1] >= 0 && stack[stack.length - 1] <= 9) {
            count.unshift(stack.pop())
          }
          count = parseInt(count.join(''))
          for (let j = 0; j < count; j++) {
            loopStr += loopArr.join('')
          }
          stack.push(...loopStr.split('')) //转换结果入栈
        }
      }
      return stack.join('')
    }
    setState('world hello')
  }, [])
  useEffect(() => {
    setTimeout(() => {
      setState('1')
      setState('1')
      setState('1')
    })
    return () => {
      console.log('useEffect1卸载', count)
    }
  }, [])
  // useEffect(() => {
  //   console.log('useEffect2', count);
  //   return () => {
  //     console.log('useEffect2卸载', count);
  //   };
  // }, [flag]);
  console.log('render11111111111111111111')

  return (
    <div>
      SixTest
      <button
        onClick={() => {
          setCount(pre => pre + 1)
          setFlag(pre => !pre)
        }}
      >
        按钮{state}
      </button>
      {/* {useTime(10)} */}
    </div>
  )
}
// 1实现一个自定义hook，倒计时计时器功能，要求支持开始，暂停，取消
// 要求以每秒进行倒计时更新，其用法满足一下typescript定义的api格式

// useTime(second:number):array{}

// 2请实现一个react hook，用于轮询请求数据
// 调用的方式如下
// const TIME_INTERVAL=300；
// useIntervalJob(() =>  //执行逻辑},TIME_INTERVAL) ；
// TIME_INTERVAL为定时轮询时间， 轮询时间示例：3000(3秒) 。
